<template>
  <el-card>
    <el-table border style="width: 100%" :data="skuList">
      <el-table-column label="序号" align="center" type="index" width="80" />
      <el-table-column prop="skuName" label="名称" width="100" />
      <el-table-column prop="skuDesc" label="描述" />
      <el-table-column label="默认图片">
        <template v-slot="{ row }">
          <el-image
            :src="row.skuDefaultImg"
            alt="商品图片"
            style="width: 100px; height: 100px"
          />
        </template>
      </el-table-column>
      <el-table-column prop="weight" label="重量(KG)" />
      <el-table-column prop="price" label="价格(元)" />
      <el-table-column label="操作" width="280px">
        <template v-slot="{ row }">
          <el-tooltip
            class="box-item"
            effect="dark"
            v-if="row.isSale == 0"
            content="上架"
            placement="top"
          >
            <el-button
              size="small"
              type="danger"
              @click="changeSkuInfo(row)"
              :icon="Top"
            ></el-button>
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            v-else
            content="下架"
            placement="top"
          >
            <el-button
              size="small"
              @click="unChangeSkuInfo(row)"
              type="success"
              :icon="Bottom"
            ></el-button>
          </el-tooltip>
          <el-tooltip class="box-item" effect="dark" content="修改" placement="top">
            <el-button size="small" type="primary" :icon="Edit"></el-button>
          </el-tooltip>
          <el-tooltip class="box-item" effect="dark" content="查看" placement="top">
            <el-button
              size="small"
              type="info"
              @click="lookMessage(row)"
              :icon="InfoFilled"
            ></el-button>
          </el-tooltip>

          <el-button size="small" type="danger" :icon="Delete"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 抽屉效果 -->
    <el-drawer v-model="drawer" size="50%" title="Sku信息描述" :direction="direction">
      <el-row :gutter="10">
        <el-col :span="5">名称</el-col>
        <el-col :span="18">{{ skuInfo?.skuName }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">描述</el-col>
        <el-col :span="18">{{ skuInfo?.skuDesc }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">价格</el-col>
        <el-col :span="18">{{ skuInfo?.price }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col span="5">平台属性</el-col>
        <el-col span="18">
          <el-tag v-for="attrValue in skuInfo.skuAttrValueList" :key="attrValue.id">{{
            attrValue.attrName
          }}</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">销售属性</el-col>
        <el-col :span="16">
          <el-tag
            v-for="saleAttrValue in skuInfo.skuSaleAttrValueList"
            :key="saleAttrValue.id"
            >{{ saleAttrValue.saleAttrValueName }}</el-tag
          >
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">商品图片</el-col>
        <el-col :span="16">
          <!-- 走马灯 -->
          <el-carousel
            class="sku-carousel"
            trigger="click"
            height="400px"
            style="width: 400px"
          >
            <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item">
              <el-image
                :src="item.imgUrl"
                alt=""
                style="width: 100%; height: 100%"
              ></el-image>
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
    <!-- 分页器 -->
    <el-pagination
      v-model:currentPage="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 15, 20]"
      :small="small"
      :disabled="disabled"
      :background="background"
      :total="total"
      layout="prev, pager, next, jumper, ->, sizes, total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script lang="ts">
export default {};
</script>
<script lang="ts" setup>
import {
  reqGetAllSkuListData,
  reqOnSale,
  reqUpSale,
  reqGetOneSkuListData,
} from "@/api/product/sku";
import { ref, onMounted } from "vue";
import { Delete, Edit, Top, Bottom, InfoFilled } from "@element-plus/icons-vue";

// 创建请求所需参数 分页器
let currentPage = ref(1);
let pageSize = ref(5);
let total = ref(1);

const small = ref(false);
const background = ref(false);
const disabled = ref(false);

// 抽屉效果变量
const drawer = ref(false);
const direction = ref("rtl");

// 创建变量存储请求回来的数据
const skuList = ref([]);
const skuInfo = ref([]);

// 创建发送请求函数
const getSkuListData = async () => {
  // 请求函数
  const result = await reqGetAllSkuListData(currentPage.value, pageSize.value);
  skuList.value = result.records;
  total.value = result.total;

  console.log(result);
};

const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`);
  pageSize.value = val;
  getSkuListData();
};
// 改变当前项页面数
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`);
  currentPage.value = val;
  getSkuListData();
};

// 商品上架
const changeSkuInfo = async (row: any) => {
  await reqOnSale(row.id);
  //将按钮显示
  row.isSale = 1 - row.isSale;
};

// 商品下架
const unChangeSkuInfo = async (row: any) => {
  await reqUpSale(row.id);
  //将按钮显示
  row.isSale = 1 - row.isSale;
};

// 查看按钮查看信息
const lookMessage = async (row: any) => {
  // 发送请求获取一调数据
  const result = await reqGetOneSkuListData(row.id);
  console.log("sku商品信息", result);
  skuInfo.value = result;
  drawer.value = true;
};

//组件挂载时发送请求
onMounted(() => {
  getSkuListData();
});

/* {"id":624,
"spuId":1,
"price":1,
"skuName":"123",
"skuDesc":"33333",
"weight":"1.00",
"tmId":null,
"category3Id":61,
"skuDefaultImg":"http://47.93.148.192:8080/group1/M00/00/01/rBHu8l-rfvmAZJX2AAGmVo8Tz9s683.jpg",
"isSale":0,
"createTime":"2022-08-06 13:44:49",
"skuImageList":[{"id":894,"skuId":624,"imgName":"6029cb2c2b2c7668.jpg","imgUrl":"http://47.93.148.192:8080/group1/M00/00/01/rBHu8l-rfvmAZJX2AAGmVo8Tz9s683.jpg","spuImgId":null,"isDefault":"1"}],
"skuAttrValueList":[{"id":1360,"attrId":106,"valueId":176,"skuId":624,"attrName":"手机一级","valueName":"安卓手机"}],
"skuSaleAttrValueList":[{"id":644,"skuId":624,"spuId":1,"saleAttrValueId":1,"saleAttrId":1,"saleAttrName":"颜色","saleAttrValueName":"陶瓷黑"} */
</script>

<style></style>
